<template>
  <div class="major-event-content">
    <div class="map">
      <GdMap ref="gdEventMap" :identifier="'gdMapContainer'" @marker-click="markerClick"></GdMap>
    </div>
    <div class="date-wrap">
      <span :class="{'active':activeDate=='day'}" @click="activeDateChange('day')">今日</span>
      <span :class="{'active':activeDate=='month'}" @click="activeDateChange('month')">近3个月</span>
    </div>
    <div v-show="eventList.length">
      <div class="icon-map" v-if="isMap" @click="MapListChange">
        <img src="@/assets/icon/icon-map.png" alt="">
        <span>地图</span>
      </div>
      <div class="icon-map list" v-else @click="MapListChange">
        <img src="@/assets/icon/icon-list.png" alt="">
        <span>列表</span>
      </div>
      <div v-show="!isMap" class="detail-wrap">
        <van-swipe
          class="back-swipe"
          :width="viewportWidth"
          :show-indicators="false"
          :stop-propagation="false"
          @change="onChange"
          ref="refEventSwiper"
        >
          <van-swipe-item v-for="(eventDetail, index) in eventList" :key="index" style="">
            <EventDetail ref="detailRef" :detail="detailData" @detail-link="detailLink"></EventDetail>
          </van-swipe-item>
        </van-swipe>
      </div>
      <EventList v-show="isMap" :list="eventList" @detail-link="detailLink"></EventList>
    </div>
    <div class="no-data" v-show="!eventList.length">
      暂无数据
    </div>
    <MajorDetail v-if="majorEventDetailVisible" @detail-close="detailClose" :detailData="majorDetailData"></MajorDetail>
  </div>
</template>

<script lang="ts" setup>
import GdMap from "@/components/GdMap/gd-map.vue"
import { computed, ref, reactive, toRefs, watch, onActivated, onMounted, nextTick, watchEffect } from 'vue'
import { showImagePreview } from 'vant'
import EventDetail from "./EventDetail.vue"
import EventList from "./EventList.vue"
import MajorDetail from "../detail.vue"
import eventIcon from "@/assets/icon/icon-event.png"
import eventCheckIcon from "@/assets/icon/icon-event-check.png"

import HomeServe from '@/api/home'
import EventServe from '@/api/event'

defineOptions({
  name: 'MajorEvent'
})

//初始化地图
const gdEventMap = ref<HTMLElement | null>(null)
const initMap = (point) => {
  gdEventMap.value.initMap((layers: any) => {
    if(eventList.value.length>0){
      addEventPoint()
      getDetail(point)
    }
  });
}
//默认展示地图
const isMap = ref(false);
const onChange = (index) =>{
  let item = eventList.value[index];
  getDetail(item)
}

const viewportWidth = ref(0)
watchEffect(() => {
  let width = window.innerWidth || document.documentElement.clientWidth
  viewportWidth.value = width - (width/10) + 10;
});

const detailData = ref({})
//获取事件详情
const getDetail = (item: object) => {
  EventServe.getEventsInfoById(item.id).then(res=>{
    detailData.value = res.data
    addCuurentMarket(item)
  })
}

const activeDate = ref('day');
//获取重大事件
const eventList = ref([]);
const getImportantEvent = () => {
  HomeServe.getEventsPoints({type:activeDate.value}).then(res => {
    eventList.value = res.data;
    nextTick(() => {
      initMap(eventList.value[0])
    })
  })
}
getImportantEvent()

const activeDateChange = (val) => {
  activeDate.value = val
  getImportantEvent()
}

//地图打点
const addEventPoint = () => {
  gdEventMap.value.clearMap();
  let markers = [];
  eventList.value.forEach(element => {
    element.lon = element.ycoordinate;
    element.lat = element.xcoordinate;
    element.icon = eventIcon;
    element.name = element.eventName;
    element.checkIcon = eventCheckIcon;
  });
  markers = eventList.value
  gdEventMap.value.addMarkers(markers);
  gdEventMap.value.setCenter([markers[0].ycoordinate, markers[0].xcoordinate], 11.63)
}

//自定义打点，当前选中的点
const addCuurentMarket = (point: object) => {
  var markerContent = '' +
    '<div class="custom-content-marker">' +
    '   <img src="'+ eventCheckIcon + '">' +
    '</div>';
  
  let markers = {
    position: [point.ycoordinate, point.xcoordinate],
    icon: eventCheckIcon,
    content: markerContent,
    offset: new AMap.Pixel(-20, -27)
  }
  gdEventMap.value.setMarkerHtml(markers);

}

const markerClick = (e) => {
  if(e.target._originOpts.properties.id){
    let point = e.target._originOpts.properties
    getDetail(point)
  }
}

//地图和列表切换
const MapListChange = () => {
  isMap.value = !isMap.value
}

const majorEventDetailVisible = ref(false)
const majorDetailData = ref()
//打开重大事件跟踪详情页
const detailLink = (data: any) => {
  majorEventDetailVisible.value = true
  majorDetailData.value = data;
}
const detailClose = () => {
  majorEventDetailVisible.value = false
}

//图片放大查看
const previewImg = () => {
  showImagePreview({
    images: [ '/src/assets/home/bg-gonggongfuwu.png','/src/assets/home/bg-jingjidiaojie.png' ],
    startPosition: 1
  });
}
</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.major-event-content{
  position: relative;
  overflow: hidden;
  .map{
    width: 375px;
    height: calc(100vh + 90px);
    margin-top: -180px;
    :deep(.amap-icon){
      width: 29.5px!important;
      height: 33px!important;
      img{
        width: 100%!important;
        height: 100%!important;
      }
    }
    :deep(.custom-content-marker){
      width: 44.5px!important;
      height: 50px!important;
      img{
        width: 100%!important;
        height: 100%!important;
      }
    }
  }
  .date-wrap{
    position: absolute;
    top: 10px;
    left: 10px;
    >span{
      display: inline-block;
      background: #fff;
      color: #4A4950;
      font-size: 13px;
      height: 28px;
      line-height: 28px;
      padding: 0 10px;
      border-radius: 14px;
      box-shadow: 0px 4px 10px 0px #3A75C519;
      margin-right: 6px;
      &.active{
        background: #3A75C5;
        color: #fff;
      }
    }
  }
  :deep(.icon-map){
    position: absolute;
    top: 7px;
    right: 10px;
    background: #fff;
    color: #000000;
    font-size: 11px;
    border-radius: 7px;
    box-shadow: 0px 5px 10px 1px #00000015;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 67px;
    height: 36px;
    img{
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
    &.list{
      bottom: 280px;
      top: auto;
    }
  }
  .no-data{
    background: #fff;
    box-shadow: 0px 0px 10px 1px #00000015;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    padding: 15px 30px;
    border-radius: 5px;
    color: #000;
  }
  .detail-wrap{
    position: absolute;
    bottom: 16px;
  }
}
</style>

